<template>
  <div id="app">
    <AppHeader v-if="!isLoginPage" />
    <div class="layout" v-if="!isLoginPage">
      <NavigationMenu />
      <div class="main-content">
        <Breadcrumb /> <!-- 在这里使用 Breadcrumb 组件 -->
        <router-view />
      </div>
    </div>
    <router-view v-if="isLoginPage" /> <!-- 显示登录页面 -->
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue';
import NavigationMenu from './components/NavigationMenu.vue';
import Breadcrumb from './components/Breadcrumb.vue'; // 引入 Breadcrumb 组件

export default {
  components: {
    AppHeader,
    NavigationMenu,
    Breadcrumb, // 注册 Breadcrumb 组件
  },
  computed: {
    isLoginPage() {
      return this.$route.name === 'Login'; // 检查当前路由是否为登录页面
    },
  },
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  /* 隐藏整体的滚动条 */
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  /* 隐藏滚动条 */
}

.sidebar {
  height: 100%;
  /* 确保侧边栏填满 */
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  /* 允许垂直滚动 */
  overflow-x: hidden;
  /* 隐藏水平滚动 */
}

.main-content::-webkit-scrollbar {
  width: 8px;
}

.main-content::-webkit-scrollbar-thumb {
  background-color: #dcdcdc;
  border-radius: 4px;
}

.main-content::-webkit-scrollbar-thumb:hover {
  background-color: #b0b0b0;
}
</style>
